<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link href="../../css/style.css" rel="stylesheet" />
		<style type="text/css" media="all">
			.qty_input {
				text-align: center;
			}
			.qty_input input[type="number"],
			input[type="text"] {
				margin-bottom: 0px;
				padding-top: 0px;
				padding-bottom: 0px;
				padding-left: 0px;
				padding-right: 0px;
				text-align: center;
				border: none;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<button v-on="tap:move" type="button" class="mui-btn mui-pull-right">确定</button>
			<h1 class="mui-title">{{title}}</h1>
		</header>
		<div class="mui-content">
			<ul class="mui-table-view" style="height: 65%;">
				<template v-repeat="item:list">
					<li class="mui-table-view-cell">
						产品: {{item.product.name}}, 总量: {{item.qty}}
					</li>
					<li class="mui-table-view-cell">
						<table class="qty_input" border="1">
							<tr>
								<td width="50px"></td>
								<td v-repeat="item.product.attributes[1].values">
									{{$value|uppercase}}
								</td>
								<td>
								</td>
							</tr>
							<tr v-repeat="attribute0:item.product.attributes[0].values">
								<td>{{attribute0}}</td>
								<td v-repeat="attribute1:item.product.attributes[1].values">
									<input type="number" v-model="item.qtys[attribute0][attribute1]" v-on="tap: qtyInput($event,attribute0,attribute1)" disabled="" />
								</td>
								<td style="color: #008000;">
									<input type="number" value="17" disabled="" />
								</td>
							</tr>
							<tr style="color: #1B8D1D;">
								<td></td>
								<td>
									<input type="number" disabled="" value="2" />
								</td>
								<td>
									<input type="number" disabled="" value="4" />
								</td>
								<td>
									<input type="number" disabled="" value="8" />
								</td>
								<td>
									<input type="number" disabled="" value="4" />
								</td>
								<td>
									<input type="number" disabled="" value="8" />
								</td>
								<td>
									<input type="number" disabled="" value="8" />
								</td>
								<td>
									<input type="number" disabled="" value="34" />
								</td>
							</tr>
						</table>
					</li>

				</template>
			</ul>
		</div>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/vue.min.js"></script>
		<script src="../../app/vue-html5.js"></script>
		<script type="text/javascript" charset="utf-8">
			var time0 = Date.now();
			(function($, window, document, Vue, vm) {
				window.vm = vm = new Vue.PageVm({
					el: 'body',
					name: 'page move_detail',
					//host: localStorage['setting:host'],
					data: function() {
						return {
							title: '出库',
							list: [{
								id: 1,
								product: {
									name: 'CW001',
									attributes: [{
										attribute: 'color',
										values: ['red', 'green']
									}, {
										attribute: 'size',
										values: ['s', 'm', 'l', 'xl', 'xxl', '3xl']
									}],
								},
								price: 300,
								qty: 34,
								qtys: {
									red: {
										s: 1,
										m: 2,
										l: 4,
										xl: 2,
										xxl: 4,
										'3xl': 4
									},
									green: {
										s: 1,
										m: 2,
										l: 4,
										xl: 2,
										xxl: 4,
										'3xl': 4
									},
								}
							}, {
								id: 1,
								product: {
									name: 'CW002',
									attributes: [{
										attribute: 'color',
										values: ['red', 'blue']
									}, {
										attribute: 'size',
										values: ['s', 'm', 'l', 'xl', 'xxl', '3xl']
									}],
								},
								price: 300,
								qty: 34,
								qtys: {
									red: {
										s: 1,
										m: 2,
										l: 4,
										xl: 2,
										xxl: 4,
										'3xl': 4
									},
									blue: {
										s: 1,
										m: 2,
										l: 4,
										xl: 2,
										xxl: 4,
										'3xl': 4
									},
								}
							}]
						};
					},
					computed: {},
					watch: {},
					created: function() {
						var self = this;
						//									this.load();
					},
					plusReady: function() {
						var self = this;
						//vm.$currentWebView = plus.webview.currentWebview();
					},
					attached: function() {
						$.init({});
						var time1 = Date.now();
						$.plusReady(function() {
							console.log('%s time:%d,%d', vm.$options.name, time1 - time0, Date.now() - time0)
						});
					},
					events: {
						show: function(data) {
							this.title = data.item.name;
							console.log('show ', JSON.stringify(data));
						}
					},
					filters: {},
					methods: {
						move: function(){
							plus.nativeUI.confirm('确定转移？',function(e){
								handels = {
									'0':function(){
										plus.nativeUI.toast('正在提交....');
										setTimeout(function(){
											Vue.$emit(vm.parentWebviewId,'refresh');
											$.back();
										},500);
									},
									'1':function(){
										console.log(1);
									}
								};
								handels[e.index]&&handels[e.index]();
							},'',['确定','取消'])
						},
						load: function() {
							var self = this;
							$.ajax(self.$options.host + '/model', {
								timeout: 2000,
								success: function(data) {
									self.list = data;
								},
								error: function(xhr, type, errorThrown) {
									Vue.plusReadyDo(function() {
										plus.nativeUI.alert('连接服务器异常');
									});
								}
							});
						},
					},
					mixins: []
				});
			})(mui, window, document, Vue, window.vm = {});
		</script>
	</body>

</html>